<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>

    <head>
        <title>登入</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

            body {
                background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
                background-size: 400% 400%;
                animation: gradient 15s ease infinite;
                min-height: 100vh;
                display: flex;
                align-items: center;
                font-family: 'Noto Sans SC', sans-serif;
            }

            @keyframes gradient {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            .login-container {
                max-width: 420px;
                width: 90%;
                margin: 0 auto;
                padding: 40px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 24px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.3);
                transform: translateY(0);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .login-container:hover {
                transform: translateY(-5px) scale(1.01);
            }

            .login-header h2 {
                background: linear-gradient(120deg, #2c3e50, #3498db);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 2.4rem;
                margin-bottom: 15px;
            }

            .login-header p {
                color: #7f8c8d;
                font-size: 1.1rem;
            }

            .form-control {
                background: rgba(255, 255, 255, 0.9);
                border: 2px solid rgba(52, 152, 219, 0.2);
                border-radius: 12px;
                padding: 15px;
                font-size: 1rem;
                transition: all 0.3s ease;
            }

            .form-control:focus {
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
                transform: translateY(-2px);
            }

            .form-group label {
                font-weight: 500;
                color: #2c3e50;
                margin-bottom: 10px;
                display: block;
                transition: all 0.3s ease;
            }

            .form-group:focus-within label {
                color: #3498db;
                transform: translateY(-2px);
            }

            .btn-primary {
                background: linear-gradient(120deg, #3498db, #2980b9);
                border: none;
                border-radius: 12px;
                padding: 15px;
                font-size: 1.1rem;
                font-weight: 600;
                letter-spacing: 1px;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .btn-primary:before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: 0.5s;
            }

            .btn-primary:hover:before {
                left: 100%;
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 7px 20px rgba(52, 152, 219, 0.3);
            }

            .custom-checkbox .custom-control-label::before {
                border-radius: 6px;
                border: 2px solid rgba(52, 152, 219, 0.5);
            }

            .alert {
                background: rgba(231, 76, 60, 0.95);
                border-radius: 12px;
                padding: 15px 20px;
                color: white;
                font-weight: 500;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(231, 76, 60, 0.2);
                animation: slideInDown 0.4s ease;
            }

            @keyframes slideInDown {
                from {
                    transform: translateY(-30px);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .form-group {
                position: relative;
                margin-bottom: 25px;
            }

            .input-icon {
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                color: #95a5a6;
                transition: all 0.3s ease;
            }

            .form-control:focus+.input-icon {
                color: #3498db;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="login-container">
                <div class="login-header">
                    <h2 class="text-center">用户登录</h2>
                    <p class="text-center text-muted">欢迎使用图书管理系统</p>
                </div>
                <form action="go" method="post" id="loginForm">
                    <div class="form-group">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                        <i class="fas fa-user input-icon"></i>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                        <i class="fas fa-lock input-icon"></i>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="rememberMe" name="rememberMe">
                            <label class="custom-control-label" for="rememberMe">记住我</label>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block" id="loginBtn">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        登录
                    </button>
                </form>
            </div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#loginForm').on('submit', function (e) {
                    e.preventDefault();

                    const username = $('#username').val();
                    const password = $('#password').val();

                    if (!username || !password) {
                        showError('请填写完整的登录信息！');
                        return;
                    }

                    // 显示加载动画
                    const $btn = $('#loginBtn');
                    const $spinner = $btn.find('.spinner-border');
                    $btn.prop('disabled', true);
                    $spinner.removeClass('d-none');

                    // 模拟登录请求
                    setTimeout(function () {
                        $btn.prop('disabled', false);
                        $spinner.addClass('d-none');
                        // 这里应该是实际的表单提交
                        $('#loginForm')[0].submit();
                    }, 1000);
                });

                function showError(message) {
                    const alertHtml = `
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            ${message}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    `;
                    $('.login-header').after(alertHtml);
                }
            });
        </script>
    </body>

    </html>